<template>
	<div class='toggle-list-btn'>
		<a href='javascript:;' v-for='(item, index) in items' class='item' :class='{selected : value == item.value}' @click='toggleList(item.value, index)'>{{item.name}}</a>
	</div>
</template>

<script>
	export default {
		props : {
			items : {
				type : Array,
				default : []
			},
			
			value : ''
		},
		
		data() {
			return {
				selected : 0
			}
		},
		
		methods : {
			toggleList (value, index) {
				if(this.value != value){
					this.selected = index
					this.$emit('toggle', value)
				}
			}
		}
	}
</script>

<style lang='less' scoped>
	.toggle-list-btn{
		width:200px;
		border:1px solid #ebeef5;
		border-radius:5px;
		display:flex;
		.item{
			font-size:12px;
			flex:1;
			line-height:30px;
			text-align:center;
			border-right:1px solid #ebeef5;
			&:last-of-type{
				border-right:none;
			}
			&.selected{
				color:#FFFFFF;
				background:linear-gradient(to right, rgb(110,156,254), rgb(110,195,254))
			}
		}
	}
</style>
